<template>
  <div class="hot_box" :style="'padding:' + data.padding.top / 2 + 'px ' + data.padding.lr / 2 + 'px ' + data.padding.bottom / 2 + 'px '">
    <div
      class="hot_item"
      v-for="(item, i) in data.list"
      :style="'left:' + item.x / 1.52 + 'px;top:' + item.y / 1.52 + 'px;width: ' + item.width / 1.52 + 'px;height: ' + item.height / 1.52 + 'px;'"
    ></div>
    <vimage
      :style="'border-radius:' + data.radius.top / 2 + 'px ' + data.radius.top / 2 + 'px ' + data.radius.bottom / 2 + 'px ' + data.radius.bottom / 2 + 'px '"
      v-if="data.img"
      class="bg_img"
      :src="data.img"
   ></vimage
>
    <img
      :style="'border-radius:' + data.radius.top / 2 + 'px ' + data.radius.top / 2 + 'px ' + data.radius.bottom / 2 + 'px ' + data.radius.bottom / 2 + 'px '"
      class="bg_img"
      src="@/assets/images/banner.png"
      v-else
    />
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  }
};
</script>

<style lang="scss" scoped>
.bg_img {
  width: 100%;
  display: block;
}
.hot_box {
  position: relative;
}
.hot_item {
  position: absolute;
  // background: rgba(45, 140, 240, 0.6);
}
</style>
